<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">

	<h:head>


		<link type="text/css" rel="stylesheet"
			href="#{request.contextPath}/css/default.css" />
		<link type="text/css" rel="stylesheet"
			href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

		<ui:insert name="head"></ui:insert>

		<script type="text/javascript">
			$(function() {
				$('.sidebar a').hover(function() {
					$(this).toggleClass('ui-state-hover');
				})
			});
		</script>

		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push([ '_setAccount', 'UA-12200033-3' ]);
			_gaq.push([ '_trackPageview' ]);

			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl'
						: 'http://www')
						+ '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</h:head>

	<h:body>

		<div id="header" class="ui-widget ui-widget-header">
			<div id="logo">
				<img src="#{request.contextPath}/images/logo.png" alt="Logo" />
			</div>



			<div id="globalthemeswitcher">
				<h:form>
					<p:themeSwitcher value="#{themeSwitcherBean.theme}"
						style="width:175px;" effect="fade" var="t">
						<f:selectItem itemLabel="Choose Theme" itemValue="" />
						<f:selectItems value="#{themeSwitcherBean.advancedThemes}"
							var="theme" itemLabel="#{theme.name}" itemValue="#{theme}" />
						<p:ajax listener="#{themeSwitcherBean.saveTheme}" />

						<p:column>
							<h:graphicImage name="images/themes/#{t.image}" />
						</p:column>

						<p:column>
                            #{t.name}
                        </p:column>
					</p:themeSwitcher>
				</h:form>
			</div>
		</div>

		<div id="page" class="ui-widget">
			<div id="sidebar"
				class="ui-widget-content ui-corner-bottom ui-helper-clearfix ui-shadow">

				<h3 class="ui-widget ui-widget-header ui-corner-all submenu-title"
					style="margin-top: 2px">Ajax Core</h3>


				<h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Message</h3>


				<div id="content">
					<div class="post">
						<ui:insert name="content">...</ui:insert>
					</div>
				</div>

				<div style="clear: both;">&nbsp;</div>
			</div>
		</div>
		<ui:insert name="status">
			<p:ajaxStatus
				style="width:64px;height:64px;position:fixed;right:5px;bottom:5px">
				<f:facet name="start">
					<p:graphicImage value="/images/loading.gif" />
				</f:facet>

				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
		</ui:insert>
	</h:body>

	<ui:insert name="highlight">
		<script language="javascript"
			src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
		<script language="javascript">
			dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
			dp.SyntaxHighlighter.HighlightAll('code');
		</script>
	</ui:insert>

</f:view>
</html>
